<template>
  <div>
    <el-button
      style="margin-top: 20px"
      type="primary"
      icon="el-icon-plus"
      @click="showDialog"
      >添加</el-button
    >
    <!--
      border->用于让整个table表格添加边框
      el-table组件用于生成整个表格
      el-table-column组件用于生成表格中的每一列
        label用于确认表头标题
        width用于指定当前列宽度,如果没有写,就会将剩余宽度与其他没写的column进行平分
        align用于将当前列中的内容居中
     -->
    <!--
       通过给el-table属性添加标签属性data,可以将需要遍历的数组交给el-table组件
       el-table会将当前data的数组交给每一个el-table-column组件,组件内部会自动进行v-for遍历
       给每个el-table-column组件添加prop标签属性,声明当前列需要展示遍历对象中的哪个属性结果
       注意:prop执行的内容,在elementUI中会默认作为文本显示
       如果想要自定义列显示内容,需要使用到作用域插槽,给column组件内部传入template结构

      -->
    <el-table :data="tradeMarkList" border style="width: 100%">
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column label="品牌名称" prop="tmName"> </el-table-column>
      <el-table-column label="品牌LOGO">
        <!-- 相当于从slot-scope="scope"中解构row，就是每一行的数据 -->
        <template slot-scope="{ row }">
          <img :src="row.logoUrl" style="width: 100px; height: 80" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
            @click="showDialog(row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteAttr(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center"
      :current-page="page"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->, sizes,total "
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <!--
      标签属性:
      :visible.sync="dialogFormVisible"->用于控制当前dialog组件的显示隐藏
      :model="form" -> 将用来收集表单内部数据的对象交给form表单
      label-width="100px" ->用于控制表单的label的宽度(注意:必须带上px单位)

      组件用处:
        el-dialog->用于显示遮罩层,同时显示对话框
        el-form->主要功能,用于收集用户输入的表单数据
        el-form-item->每一个form-item代表form表单中的一行

      注意:尽量把tmForm的内部结构处理成接口所需要的结构
     -->
    <el-dialog
      :title="tmForm.id ? '修改品牌' : '添加品牌'"
      style="width: 100%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="tmForm" :rules="rules" ref="addForm">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input v-model="tmForm.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!--
            此处的action需要填写图片上传的网络路径,但是记得加上前缀/dev-api
            因为需要使用代理服务器才能将图片地址传上去
           -->
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TeadeMark",
  data() {
    return {
      page: 1,
      limit: 3,
      total: 15,
      tradeMarkList: [],
      dialogFormVisible: false,
      tmForm: {
        tmName: "",
        logoUrl: "",
      },
      rules: {
        tmName: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        logoUrl: [
          { required: true, message: "请选择LOGO图片", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getTradeMarkList();
  },
  methods: {
    async getTradeMarkList(page) {
      const {
        data: { total, records },
      } = await this.$API.trademark.getTradeMarkList(
        page ? page : this.page,
        this.limit
      );
      //以上解构赋值相当于:const total = result.data.total;
      this.total = total;
      if (page) {
        this.page = page;
      }
      this.tradeMarkList = records;
    },
    handleSizeChange(value) {
      this.limit = value;
      this.getTradeMarkList();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.getTradeMarkList();
    },
    showDialog(row) {
      // 该函数添加属性和编辑属性都会调用
      // 编辑属性的时候会传入row（当前行的数据对象）
      // 通过id属性判断当前回调函数的触发来源（因为id属性只有经过了服务器的品牌对象才会有）
      if (row.id) {
        // 只有编辑品牌才能进入该区域
        // 因为此处是引用值的传递,所以不点击确定的时候修改的时候会修改客户端的数据但是不会修改服务器的数据
        // ...是浅拷贝，将当前row对象中的所有属性以及他们的值赋值一份到tmFrom中
        this.tmForm = {
          ...row,
        };
      }
      this.dialogFormVisible = true;
    },
    handleAvatarSuccess(res, file) {
      //由于用户通过input标签选中图片之后,该图片就存储于浏览器内存中
      //以下代码是将内存中的图片,生成本地链接地址,用来展示
      // this.tmForm.logoUrl = URL.createObjectURL(file.raw);
      // 我们需要存储服务器返回回来的网上的地址
      this.tmForm.logoUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const types = ["image/jpeg", "image/jpg", "image/png"];
      // 用来判断图片的文件类型
      // const isJPG = file.type === "image/jpeg";
      const isJPG = types.includes(file.type);
      // 判断图片的大小是否超过2MB
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    addList() {
      // 先校验数据，如果数据没问题再发送请求
      this.$refs.addForm.validate(async (valid) => {
        // valid代表当前表单中所有检验的最终结果
        // console.log(valid)
        if (valid) {
          try {
            // 发送请求
            await this.$API.trademark.addOrUpdate(this.tmForm);

            // 请求最新的品牌列表
            this.getTradeMarkList();

            // 弹窗提示用户保存成功
            this.$message({
              message: "保存成功！！！",
              type: "success",
            });

            // 将对话框隐藏
            this.dialogFormVisible = false;

            // 清空当前dialog的显示数据
            this.tmForm = {
              tmName: "",
              logoUrl: "",
            };
          } catch (e) {
            // 弹窗提示用户保存失败
            this.$message("保存失败");
          }
        } else {
          this.$message("保存失败");
          return false;
        }
      });
    },
    cancel() {
      this.dialogFormVisible = false;
      this.tmForm = {
        tmName: "",
        logoUrl: "",
      };
    },
    // 监听用户点击删除
    deleteAttr(row) {
      this.$confirm(`此操作将永久删除${row.tmName}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 如果用户点击确定按钮,会执行.then内部的代码
          try {
            //1.发送请求删除该品牌
            await this.$API.trademark.deleteTradeMark(row.id);

            //2.弹窗提示用户删除成功
            this.$message({
              type: "success",
              message: "删除成功!",
            });

            //3.请求最新列表,并展示
            //3.1如果当前页面删除了该数据,还有数据需要展示,就请求当前页面
            //3.2如果当前页面删除了该数据,就没有数据了,就请求上一页
            // console.log(1,this.page)
            this.getTradeMarkList(
              this.tradeMarkList.length > 1 ? this.page : this.page - 1
            );
          } catch (error) {
            // console.log(error)
            //2.弹窗提示用户删除失败
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          // 如果用户点击取消按钮,会执行.catch内部的代码
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  watch: {
    dialogFormVisible(value) {
      if (value === false) {
        this.tmForm = {
          tmName: "",
          logoUrl: "",
        };
      }
    },
  },
};
</script>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
